<script setup lang="ts" >
import { onMounted, watch } from 'vue';
import * as echarts from 'echarts';
onMounted(() => {
    productCategoryBar()
})
const props = defineProps({
    data: {
        type: Object,
        required: true,
    }

})

// console.log(props.data);
const productCategoryBar = async () => {
    const pcb = echarts.init(document.getElementById('HorizontalBar'))
    pcb.setOption({
        // title: {
        //     text: "产品类别库存总价图",
        //     top: "0%",
        //     textStyle: {
        //         fontSize: 16
        //     },
        // },
        // tooltip: {
        //     trigger: 'axis',
        // },
        xAxis: {
            show: true,
            type: 'value',
            // 最大值（防止触顶）
            max: 100

        },
        yAxis: {
            type: 'category',
            data: props.data.regions.map((item) => item.name),
            inverse: true,
            //不展示轴线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: 'red'
            }

        },
        grid: {
            top: 0,
            right: 20,
            bottom: 0,
            left: 0,
            // 计算边距时，包含标签
            containLabel: true

        },
        series: [
            {
                data: props.data.regions.map((item) => ({
                    name: item.name,
                    value: item.value
                })),
                type: 'bar',
                showBackground: true,
                // 背景色
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                // 每个轴的样式
                itemStyle: {
                    borderColor: 'skyblue',
                    color: '#479AD3', // 设置柱子的颜色
                    shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色
                    shadowBlur: 5 // 设置柱子的阴影模糊大小
                },
                // 轴宽度
                barWidth: 22,
                barGap: '10%',
                // 轴上的字体
                label: {
                    show: true,
                    // 设置标签位置为右侧
                    position: 'right',
                    textStyle: {
                        // 设置标签文本颜色
                        color: '#fff'
                    }
                },
                realtimeSort: true
            },
        ]
    })
    window.addEventListener('resize', function () {
        pcb.resize()
    })
}
// 监听数据的变化，重新渲染图表,前面我们设置了定时器，3秒获得新数据
watch(
    () => props.data,
    () => {
        productCategoryBar()
    }
)
</script>

<template>
    <div>
        <div class="title">【横向柱状图】</div>
        <div ref="target" class="HorizontalBar" id="HorizontalBar">
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    color: rgb(220, 73, 73);
    margin-left: 4em;
    margin-top: 5px;
}

.HorizontalBar {
    width: 100%;
    height: 30vh;
    margin-top: 3vh;
}
</style>